<template>
  <div class="turntable">
    <div class="turncircle" :style="{transform: rotateAngular, transition: rotateTransition == ''? 'transform 1s ease-in-out': rotateTransition}">
      <img src="~assets/zhuanpan/prize.png" alt="prize" />
    </div>
    <div class="iter" @click="click_flag ? start():''">
      <img src="~assets/zhuanpan/iter.png" alt="iter" />
    </div>
  </div>
</template>

<script>
export default {
  name: "zhuanpanTable",
  data() {
    return {
      prizeNum: 6,//转盘格数
      accountAttention: 1,
      bindPhone: 1,
      click_flag: true,
      // baimingdan: 1,
      // haveChance: 1,
      // rotate: 0,
      prize: -1,
      circleNum: 4,//转动圈数
      keepTime: 2,//转动持续时间
      initialAngular: 0,
      rotateAngular: '',
      rotateTransition: '',
    }
  },
  methods: {
    getPrize() {
      console.log('getPrize');
      //从后端获取用户获奖信息
      this.prize = 3; 
      this.rotate(this.prize);
    },
    start() {
      this.click_flag = false;
      //判断用户是否符合抽奖条件
      if(this.accountAttention != 1) {
        this.$router.push({path: './phone'})
      }else if(this.bindPhone !=1) {
        //未绑定手机号
      }else {
        
        this.getPrize();
        setTimeout(() => {
          this.click_flag = true;//抽奖动画结束后，恢复按钮到可点击的状态
        },this.keepTime*1000+100)
      }
    },
    rotate(prize) {
      console.log('rotate');
      

      this.rotateTransition = "transform " + this.keepTime + "s ease-in-out"
      let rotateAngular = this.circleNum*360+(360/this.prizeNum)*(prize)-this.initialAngular % 360 + this.initialAngular + 30
      this.rotateAngular = "rotate(" + rotateAngular + 'deg)'
      this.initialAngular = rotateAngular
      console.log('this.initialAngular '+this.initialAngular );
    },
  }
};
</script>
<style  scoped>
.turntable {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11rem;
  height: 11rem;
  background-image: url("~assets/zhuanpan/table.png");
  background-size: 100% 100%;
}
.turncircle {
  margin-top: -0.2rem;
  width: 8.5rem;
  height: 8.5rem;
  transform: rotate(30deg);
}
img {
  width: 100%;
  height: 100%;
}
.iter {
  position: absolute;
  top: 50%;
  margin-top: -3rem;
  width: 3rem;
  height: 4rem;
}
</style>